<template>
	<view class="tab-control">
		<template v-for="(item, index) in titles" :key="item">
			<view :class="['item', currentIndex === index ? 'active' : '']" @click="handleTabClick(index)">
				<text class="text">{{item}}</text>
			</view>
		</template>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const props = defineProps({
		titles: {
			type: Array,
			default: () => []
		}
	})
	
	const currentIndex = ref(0)
	const emits = defineEmits(["tabClick"])
	function handleTabClick(index) {
		currentIndex.value = index
		emits("tabClick", index)
	}
</script>

<style lang="scss">
	.tab-control {
		padding: 10rpx;
		margin-top: 5rpx;
		display: flex;

		.item {
			flex: 1;
			text-align: center;

			.text {
				padding: 14rpx;
				display: inline-block;
				// border-bottom: 6rpx solid #fff;
			}
			
			&.active {
				.text {
					color: $gPrimaryColor;
					border-bottom: 6rpx solid $gPrimaryColor;
				}
			}
		}
	}
</style>